<template>
  <div class="menu-wrapper">
    <template v-for="item in routes" v-if="!item.hidden&&item.children.length > 0 ">
      <!--<router-link v-if="item.children.length===1 && !item.children[0].children" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">-->
      <router-link v-if="!item.children[0].children && item.menuLevel === 1" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown' @click="loadPage(item.path+'/'+item.children[0].path)">
          <!--<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>-->
          <i v-if="item.children[0].meta&&item.children[0].meta.icon" class="iconfont" :class="item.children[0].meta.icon"></i>
          <span v-if="item.children[0].meta&&item.children[0].meta.title" :class="item.children[0].meta.titleClass">{{generateTitle(item.children[0].meta.title)}}</span>
        </el-menu-item>
      </router-link>

      <el-submenu v-else :index="item.name||item.path" :key="item.name">
        <template slot="title">
          <!--<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>-->
          <i v-if="item.meta&&item.meta.icon" class="iconfont" :class="item.meta.icon"></i>
          <span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
        </template>

        <template v-for="child in item.children" v-if="!child.hidden">
          <sidebar-item class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
           <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
            <el-menu-item :index="item.path+'/'+child.path"  @click="loadPage(item.path+'/'+child.path)">
              <!--<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>-->
              <i class="iconfont icon-dian" style="font-size:6px;margin-left:5px;"></i><svg-i v-if="child.meta&&child.meta.icon" class="iconfont" :class="child.meta.icon"></svg-i>
              <span v-if="child.meta&&child.meta.title" style="margin-left:-10px;">{{generateTitle(child.meta.title)}}</span>
            </el-menu-item>
          </router-link>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

<script>
import { generateTitle } from '@/utils/i18n'
import { getUrl, getUsername, setPageName } from "../../../../utils/auth.js";
export default {
  name: 'SidebarItem',
  props: {
    routes: {
      type: Array
    }
  },
  data() {
    return {
      pageurl : ""
    }
  },
  methods: {
    generateTitle,
    loadPage(item) {
      var _this = this;
      _this.pageurl = item;
      setPageName(_this.pageurl)
      Avatar.push([
        "track",
        [
          "category",
          "loginSuccess",
          "label",
          {
            url: getUrl(),
            userName: getUsername(),
            pageurl: _this.pageurl
          },
          0
        ]
      ]);
    }
  }
}
</script>

<style lang="scss" scoped>
  i {
    color: #e6e8f3;
    margin-right: 5px;
  }
  .icon-yonghuming {
    position: relative;
    right: 1px;
    font-size: 19px;
  }
  .icon-yonghuming + span {
    position: relative;
    right: 3px;
  }
  .icon-drgspingtairuanjianxitong24 {
    position: relative;
    right: 1px;
    font-size: 18px;
  }
  .icon-drgspingtairuanjianxitong24 + span{
    position: relative;
    right: 2px;
  }
  .icon-guanyuwomen {
    position: relative;
    right: 1px;
    font-size: 19px;
  }
  .icon-guanyuwomen + span{
    position: relative;
    right: 3px;
  }
</style>

